<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://unpkg.com/vue@2.7.14/dist/vue.min.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"></script>
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <style>
        html,body,#app{
            padding: 0px;
            margin: 0px;
            height: 100%;
            background-color: #aaaaaa;
        }
        #pages{
            padding-top: -100px;
            text-align: right;
        }
        #pages>span{
            background-color: #ddd;
            margin: 2px;
            padding: 2px 5px;
            border-radius: 2px;
            min-width: 15px;
            display: inline-block;
            text-align: center;
            cursor: pointer;
        }
        #pages>span.current{
            background-color: #aaa;
        }
        #pages>span:hover{
            background-color: beige;
            color: green;
        }
        .demo-table-expand {
            font-size: 0;
        }
        .demo-table-expand label {
            width: 80px;
            color: #99a9bf;
        }
        .demo-table-expand .el-form-item {
            margin-right: 20px;
            padding-left: 30px;
            margin-bottom: 0;
            width: 50%;
        }
    </style>
</head>
<body>
<div id="app" style="height: 100%;width: 100%">
    <el-container style="width: 100%;height: 100%">
        <el-header style="padding-top: 10px">
            <el-form :inline="true" class="demo-form-inline" style="display: flex;align-items: center">
                <el-form-item label="比赛编号">
                    <el-input placeholder="比赛编号" v-model="mid"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click.prevent="selectResultByMid()">查询</el-button>
                    <el-button type="primary" @click="dialogFormVisible = true">添加</el-button>
                </el-form-item>
            </el-form>
        </el-header>
        <el-main style="height: 100%;padding: 0 0 0 0">
            <el-table
                    :data="statistics"
                    style="width: 100%;height: 100%">
                <el-table-column type="expand">
                    <template slot-scope="props">
                        <el-form label-position="left" inline class="demo-table-expand">
                            <el-form-item label="击杀数:">
                                <span>{{ props.row.kills }}</span>
                            </el-form-item>
                            <el-form-item label="死亡数:">
                                <span>{{ props.row.deaths }}</span>
                            </el-form-item>
                            <el-form-item label="助攻数:">
                                <span>{{ props.row.assists }}</span>
                            </el-form-item>
                            <el-form-item label="补刀数:">
                                <span>{{ props.row.minionsKilled }}</span>
                            </el-form-item>
                            <el-form-item label="经济:">
                                <span>{{ props.row.money }}</span>
                            </el-form-item>
                        </el-form>
                    </template>
                </el-table-column>
                <el-table-column
                        prop="statisticsId"
                        label="编号">
                </el-table-column>
                <el-table-column
                        prop="resultsId"
                        label="比赛场次编号">
                </el-table-column>
                <el-table-column
                        prop="playerId"
                        label="选手编号">
                </el-table-column>
                <el-table-column
                        prop="matchId"
                        label="比赛编号">
                </el-table-column>
                <el-table-column
                        prop="heroId"
                        label="选用英雄编号">
                </el-table-column>
                <el-table-column
                        prop="banHeroId"
                        label="禁用英雄编号">
                </el-table-column>
                </el-table-column>
            </el-table>
        </el-main>
        <el-footer>
            <div id="pages">
                <el-pagination background
                               :page-size="7" layout="prev,pager,next"
                               :total="total"
                               @current-change="selectAllStatistics"/>
            </div>
        </el-footer>
    </el-container>

    <el-dialog title="比赛详情" :visible.sync="dialogFormVisible">
        <el-form ref="form" :model="statistic" label-width="100px">
            <el-form-item label="对阵双方">
                <el-select v-model="statistic.matchId"
                           @change="selectMatchById()" placeholder="请选择比赛" style="width: 300px">
                    <el-option v-for="match in matches"
                               :label="match.awayTeamName+' VS '+match.homeTeamName"
                               :value="match.matchId"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="比赛场次编号">
                <el-input style="width: 180px" v-model="statistic.resultsId"></el-input>
            </el-form-item>
            <el-form-item label="选手所在队伍">
                <el-select v-model="statistic.teamId"
                           @change="selectPlayers()"
                           placeholder="请选择队伍" style="width: 300px">
                    <el-option v-for="team in teams"
                               :label="team.name"
                               :value="team.teamId"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="请选择选手">
                <el-select v-model="statistic.playerId"
                           placeholder="选择选手" style="width: 300px">
                    <el-option v-for="player in players"
                               :label="player.name"
                               :value="player.playerId"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="选择英雄编号">
                <el-input style="width: 180px" v-model="statistic.heroId"></el-input>
            </el-form-item>
            <el-form-item label="禁用英雄编号">
                <el-input style="width: 180px" v-model="statistic.banHeroId"></el-input>
            </el-form-item>
            <el-form-item label="击杀数">
                <el-input style="width: 180px" v-model="statistic.kills"></el-input>
            </el-form-item>
            <el-form-item label="死亡数">
                <el-input style="width: 180px" v-model="statistic.deaths"></el-input>
            </el-form-item>
            <el-form-item label="助攻数">
                <el-input style="width: 180px" v-model="statistic.assists"></el-input>
            </el-form-item>
            <el-form-item label="补刀数">
                <el-input style="width: 180px" v-model="statistic.minionsKilled"></el-input>
            </el-form-item>
            <el-form-item label="经济">
                <el-input style="width: 180px" v-model="statistic.money"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click.prevent="addStatistic()">立即添加</el-button>
                <el-button @click="dialogFormVisible=false">取消</el-button>
            </el-form-item>
        </el-form>
    </el-dialog>
</div>
<script>
    var v=new Vue({
        el:"#app",
        data:{
            statistic: {
                teamId:'',
                matchId: '',
                resultsId:'',
                playerId:'',
                heroId:'',
                banHeroId:'',
                money:'',
                kills:'',
                deaths:'',
                assists:'',
                minionsKilled:''
            },
            statistics:[],
            teams:[],
            players:[],
            matches:{},
            dialogFormVisible:false,
            mid:'',
            page:1,
            total:0
        },
        created(){
            this.selectMatches();
            this.selectAllResult();
            this.selectTotal();
            this.selectAllStatistics(1);
            this.selectTeam();
        },
        methods: {
            selectAllStatistics(page){
                axios.post("/yjh-admin/yjh/admin/selectAllStatistics?current="+page).then(res=>{
                    this.statistics=res.data.list;
                    console.log(this.statistics);
                })
            },
            selectTotal(){
                axios.get("/yjh-admin/yjh/admin/selectTotal").then(res=>{
                    this.total=res.data;
                })
            },
            selectTeam(){
              axios.get("/yjh-admin/yjh/admin/selectTeam").then(res=>{
                  this.teams=res.data;
              })
            },
            selectPlayers(){
                axios.post("/yjh-admin/yjh/admin/players?team_id="+this.statistic.teamId).then(res=>{
                    this.players=res.data;
                })
            },
            addStatistic() {
                axios.post("/yjh-admin/yjh/admin/addStatistic",this.statistic).then(res=>{
                    if (res.data.code==1){
                        this.$message(res.data.msg);
                    }else {
                        this.$alter(res.data.msg);
                    }
                    this.selectAllStatistics(1);
                })
            },
            selectAllResult(){
                axios.get("/yjh-admin/yjh/admin/selectAllResult").then(res=>{
                    this.results=res.data;
                    console.log(this.results);
                })
            },
            selectResultByMid(){
                console.log(this.mid);
                axios.post("/yjh-admin/yjh/admin/selectByMid?mid="+this.mid).then(res=>{
                    this.results=res.data;
                })
            },
            selectMatches(){
                axios.get("/yjh-admin/yjh/admin/selectMatches").then(res=>{
                    this.matches=res.data;
                })
            },
            selectMatchById(){
                axios.post("/yjh-admin/yjh/admin/selectMatchById?mid="+this.result.matchId).then(res=>{
                    this.match=res.data.data[0];
                })
            }
        }
    });
</script>
</body>
</html>
<style>
    .el-container{
        height: 300px;
        width: 400px;
    }
    .el-header{
        background-color: #eee;
    }
    .el-footer{
        background-color: #ddd;
    }
    .el-aside{
        background-color: #cccccc;
    }
    .el-main{
        background-color: #555555;
    }


</style>